<template>
    <div class="container clearfix">
        <div class="left-block">
            <Menu :active-name="active_name" :open-names="open_id" v-for="(items, indexs) in businesslist" :key="indexs">
                <Submenu :name="items.id">
                    <template slot="title">
                        <Icon type="ios-navigate"></Icon>
                        {{items.name}}
                    </template>
                    <Menu-item class="ellipsis"  @click.native="handleContent(item)" :name="'1-' + item.id" v-for="(item, index) in items.business.data" :key="index">
                    <p>{{item.name}}</p>
                    </Menu-item>
                </Submenu>

            </Menu>
        </div>
        <div class="right-block">
            <h2 class="title">{{article.name}}</h2>
            <p class="date">{{article.created_at}}</p>
            <div class="content" v-html="article.contents"></div>
        </div>
	</div>
</template>
<script>
export default {
    data(){
        return{
            businesslist:[],
            openNames:null,
            article:{}
        }
    },
    mounted(){
        this.getCarousel();
    },
    methods:{
        getCarousel(){
            this.$http.get('/bc/list?include=business').then(business => {
                this.businesslist =  business.data.data;
                this.open_id = [business.data.data[0].id];
                this.active_name = "1-" + business.data.data[0].business.data[0].id;
                this.article = business.data.data[0].business.data[0];
            }).catch(err => {

            })
        },
        handleContent(item){
            this.article = item;
        },
        selectMenu(val){
            console.log(JSON.parse(val))
        }
    }
}
</script>
<style scoped>
.container{ max-width:1200px; margin:16px auto;}
.left-block{ border:1px solid #dddee1; float: left;}
.left-block .ivu-menu:after{ display:none;}
.right-block{ margin-left:250px; margin-top:20px; margin-bottom:40px; padding:0 20px;}
.right-block .title{ text-align:center; font-size:16px; font-weight:bold; line-height:32px;}
.right-block .date{ text-align:center;}
.right-block .content{ line-height:24px;}
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){ color:#15ccac; border-color:#15ccac; }
</style>